<template>
	<view class="login-page">
		<!-- 背景色 -->
		<view class="background-color"></view>
		<!-- 间隔 -->
		<view style="height: 30px;"></view>
		<!-- logo -->
		<view class="imgbox">
			<view class="boxs">
				<view class="images"> <image src="../../static/files/imgs/logo_w.png"  class="logo"></image> </view>
			</view>
			<view class="texts"> Time mercenaries </view>
			<view class="texts"> --- 拥抱时间 --- </view>
		</view>

		<!-- 登录表单 -->
		<uni-forms :value="loginForm" ref="loginFormRef" :rules="rules">
			<!-- 用户名输入框 -->
			<uni-forms-item name="username">
				<uni-easyinput style="color: white;" type="text" prefixIcon="contact" v-model="loginForm.username" placeholder="用户名" />
			</uni-forms-item>
			<!-- 密码输入框 -->
			<uni-forms-item name="password">
				<uni-easyinput style="color: white;" type="password" prefixIcon="locked" v-model="loginForm.password" placeholder="密码" />
			</uni-forms-item>
			<!-- 后端IP地址 -->
			<uni-forms-item name="urlip">
				<uni-easyinput style="color: white;" type="text"  v-model="urlip" placeholder="后端IP" />
			</uni-forms-item>
			<!-- 记住密码 -->
			<uni-forms-item name="remember">
			<view class="remember-psw" style="color: white;">
				<checkbox-group>
					<label>
						<checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86" />记住账号密码
					</label>
				</checkbox-group>
				<view ></view>
			</view>
			</uni-forms-item>
			<!-- 按钮区 -->
			<uni-forms-item>
				<view class="the-button">
					<!-- <button plain="true" style="color: white; border-color: white;" type="default" size="mini" class="clean-button" @click="resetLoginForm">⟳</button> -->
					<button type="default" size="mini" class="clean-button" @click="resetLoginForm">清空</button>
					<button type="default" size="mini" class="login-button" @click="login">登录</button>
					<button type="default" size="mini" class="register-button" @click="registerPage">注册</button>
				</view>
			</uni-forms-item>
			<uni-forms-item>
				<!-- 间隔 -->
				<view style="height: 30px;"></view>
				<view class="forget" @click="forgetPage">密码找回</view>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	import config from '../../common/vmeitime-http/interface.js'
	export default {
		data() {
			return {
				rememberPsw: true,
				// urlip: 'http://127.0.0.1:8000',
				urlip: 'http://192.168.3.9:8000',
				loginForm: {
					username: '',
					password: ''
				},
				rules: {
					// 对username字段进行必填验证
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名！',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 5,
								errorMessage: '长度在 {min} 到 {max} 个字符！',
								trigger: 'blur'
							}
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码！',
								trigger: 'blur'
							},
							{
								min: 6,
								max: 15,
								message: '长度在 {min} 到 {max} 个字符！',
								trigger: 'blur'
							}
						]
					}
				}
			}
		},
		mounted() {
			// uni.setStorageSync('urlip', null)
			uni.setStorageSync('urlip', this.urlip)
			config.baseURL = uni.getStorageSync('urlip')
			//页面加载完成，获取本地存储的用户名及密码
			const username = uni.getStorageSync('username');
			const password = uni.getStorageSync('password');
			// console.log("22",username)
			if (username && password) {
				this.loginForm.username = username;
				this.loginForm.password = password;
			} else {
				this.loginForm.username = "";
				this.loginForm.password = "";
			}
			// const urlip = uni.getStorageSync('username');
			// if (urlip) {
			// 	this.urlip = urlip;
			// } else {
			// 	this.urlip = "";
			// }
		 
		},
		methods: {
			// 清空内容按钮
			resetLoginForm () {
			    this.$refs.loginFormRef.resetFields()
			},
			// 登录按钮
			login () {
				// config.baseURL = uni.getStorageSync('urlip')
				this.$refs.loginFormRef.validate(async valid => {
					const {
						data: res
					} = await this.$http.post('login/', this.loginForm)
					// console.log(res)
					if (res.code !== 200) {
						return uni.showModal({
							title: '通知',
							content: res.msg,
							showCancel: false
						})
					}
					//登录成功将用户名密码存储到用户本地
					if (this.rememberPsw) { //用户勾选“记住密码”
						uni.setStorageSync('username', this.loginForm.username);
						uni.setStorageSync('password', this.loginForm.password);
						uni.setStorageSync('urlip', this.urlip);
					} else { //用户没有勾选“记住密码”
						uni.removeStorageSync('username');
						uni.removeStorageSync('password');
						this.loginForm.username = "";
						this.loginForm.password = "";
					}
					// 存储token
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('username', this.loginForm.username);
					uni.setStorageSync('password', this.loginForm.password);
					// console.log(res)
					// 跳转到主页
					uni.switchTab({
						url: '../home/home'
					})
				})
			},
			// 访问注册页
			registerPage () {
				uni.navigateTo({ url: './register' })
				// this.Goto('../login/register')
				
			},
			// 访问忘记密码页
			forgetPage () {
				uni.navigateTo({ url: './forget' })
				// this.Goto('../login/forget')
			}
		}
	}
</script>

<style scoped >
	.login-page {
		width: 100%;
		height: auto;
		top: 0;
	}
	.background-color {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background-color: #2C405A;
	}
	.imgbox {
		/* margin-top: 50px; */
		width: 100%;
		height: auto;
		text-align: center;
	}
	.logo {
		width: 200px;
		height: 200px;
	}
	.texts {
		color: white;
		margin-top: 10px;
		font-size: 16px;
		width: 100%;
		height: auto;
		font-weight: 600;
	}
	.the-button {
		width: 100%;
		height: auto;
		text-align: center;
	}
	.clean-button {
		/* border-radius: 50px 50px 50px 50px; */
		margin-left: 10px;
		margin-right: 10px;
		font-size: 15px;
	}
	.login-button {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 15px;
	}
	.register-button {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 15px;
	}
	.forget {
		color: white;
		font-size: 16px;
		width: 100%;
		height: auto;
		text-align: center;
	}
	.uni-forms {
		padding: 40px 15px;
	}
</style>
